<!-- 我的 -->
<template>
	<view class="my-box">
		<!-- 个人信息 -->
		<view class="my-info">
			<view class="head-portrait">
				<image src="../../../static/logo.png" />
			</view>
			<view class="name-box">
				<view class="name" v-if="token">{{userInfo.userName}}</view>
				<text class="sign" v-else @click="$goToUrl('/pages/login/login/login')">请点击登录</text>
				<view class="words">欢迎登入牛利智能家园物业端！</view>
			</view>

			<view class="sign-out" @click="onLogoutClick" v-if="token">
				<view class="icon">
					<image src="../../../static/i-tc.png" />
				</view>
				<text>退出登入</text>
			</view>
		</view>
		<!-- 选项 -->
		<view class="content-box">
			<view class="content-ul nl-shadow-box">
				<view class="nl-flex-list active" @click="$goToUrl('/pages/my/communitys/changeCommunity')">
					<view>切换小区</view>
					<view class="right" style="color: #AFAFAF;margin-right: 10rpx;">{{userCommunity.name}}</view>
					<u-icon name="arrow-right" color="#414141" size="28"></u-icon>
				</view>
				<view class="nl-flex-list active" @click="$goToUrl('/pages/my/information/information')">
					<view>个人信息</view>
					<u-icon class="right" name="arrow-right" color="#414141" size="28"></u-icon>
				</view>
				<view class="nl-flex-list active" @click="$goToUrl('/pages/my/malfunctionRepair/malfunctionRepair')">
					<view>故障报修</view>
					<u-icon class="right" name="arrow-right" color="#414141" size="28"></u-icon>
				</view>
				<view class="nl-flex-list active" @click="$goToUrl('/pages/my/repairDispatchFinish/repairDispatchFinish')">
					<view>维修已办</view>
					<u-icon class="right" name="arrow-right" color="#414141" size="28"></u-icon>
				</view>
				<view class="nl-flex-list active" @click="$goToUrl('/pages/my/complaintsDispatchFinish/complaintsDispatchFinish')">
					<view>投诉已办</view>
					<u-icon class="right" name="arrow-right" color="#414141" size="28"></u-icon>
				</view>
				<view class="nl-flex-list active" @click="$goToUrl('/pages/my/topUpRecord/topUpRecord')">
					<view>充值记录</view>
					<u-icon class="right" name="arrow-right" color="#414141" size="28"></u-icon>
				</view>
				<view class="nl-flex-list active" @click="$goToUrl('/pages/my/setUp/updPass/updPass')">
					<view>修改密码</view>
					<u-icon class="right" name="arrow-right" color="#414141" size="28"></u-icon>
				</view>
				<!-- <view class="nl-flex-list active" @click="$goToUrl('/pages/my/repair/repair')">
					<view>我的报修单</view>
					<u-icon class="right" name="arrow-right" color="#414141" size="28"></u-icon>
				</view>
				<view class="nl-flex-list active" @click="$goToUrl('/pages/my/complaints/complaints')">
					<view>我的投诉单</view>
					<u-icon class="right" name="arrow-right" color="#414141" size="28"></u-icon>
				</view> -->
				<!-- @click="$goToUrl('/pages/my/setUp/setUp')" -->
				<view class="nl-flex-list active">
					<view>系统版本</view>
					<view class="right">{{version}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState, mapActions} from 'vuex';
	import config from '@/conf/config.js'
	export default {
		components: {

		},
		data() {
			return {
				version:''
			}
		},
		computed: {
			...mapState('user', ['token', 'userInfo', 'userId','userCommunity'])
		},
		onLoad() {
			this.version = config.version
		},
		methods: {
			...mapActions('user', ['cleanUserInfo']),
			...mapActions('websocket', ['WEBSOCKET_CLOSE']),
			/**
			 * 退出登录
			 */
			onLogoutClick() {
				uni.showModal({
					title: '提示',
					content: '是否退出当前账号？',
					success: ({
						confirm,
						cancel
					}) => {
						if (confirm) {
							this.cleanInfo();
						}
					}
				});
			},
			/**
			 * 清除数据
			 */
			cleanInfo() {
				this.cleanUserInfo()
				this.WEBSOCKET_CLOSE()
			}
		}
	}
</script>

<style lang="scss">
	.my-box {
		width: 100%;
		background-image: url(../../../static/tbbj.png);
		background-size: 100% auto;
		background-repeat: no-repeat;
	}

	.my-info {
		display: flex;
		position: relative;
		align-items: center;
		padding: 0 0 24rpx 32rpx;
	}

	.my-info .head-portrait {
		width: 116rpx;
		height: 116rpx;
		border: 8rpx solid rgba(255, 255, 255, .4);
		border-radius: 200rpx;
		overflow: hidden;
		margin-right: 24rpx;
	}

	.my-info .head-portrait image {
		width: 100%;
		height: 100%;
	}

	.my-info .name-box {
		flex: 1;
	}

	.my-info .name-box .name {
		font-size: 32rpx;
		font-weight: 600;
		color: #FFFFFF;
	}

	.my-info .name-box .sign {
		font-size: 32rpx;
		padding: 10rpx 0;
		display: inline-block;
		font-weight: 600;
		color: #FFFFFF;
	}

	.my-info .name-box .words {
		color: #FFFFFF;
		font-size: 24rpx;
	}

	.my-info .sign-out {
		width: 180rpx;
		height: 58rpx;
		display: flex;
		align-items: center;
		border-top-left-radius: 200rpx;
		border-bottom-left-radius: 200rpx;
		padding-left: 32rpx;
		background-color: rgba(255, 255, 225, .6);
	}

	.my-info .sign-out .icon {
		width: 28rpx;
		height: 28rpx;
		margin-right: 8rpx;
	}

	.my-info .sign-out .icon image {
		width: 100%;
		height: 100%;
	}

	.my-info .sign-out text {
		font-size: 24rpx;
		color: #208CFF;
	}

	.content-box {
		padding: 0 32rpx;
	}

	.content-ul {
		padding: 0 20rpx;
		// padding: 10rpx 20rpx 40rpx;
	}
</style>
